<template>
    <div id="statistics" class="statistics">

    </div>
</template>

<script>
import * as echarts from 'echarts'
export default {
    mounted() {
        this.initChart()
    },
    methods: {
        initChart() {
            const chart = this.$echarts.init(document.getElementById('statistics'));
            const options = {
                title: {
                    text: '电力来源统计',
                    textStyle: {
                        color: 'rgb(85, 85, 85)',
                        fontSize: 14,
                        fontWeight: 100
                    }
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ['可再生能源发电量比例', '石油发电量比例', '核能发电量比例', '天然气发电量比例', '水利发电量比例'],

                    orient: 'vertical',
                    top: 50,
                    right: 0,
                    itemWidth: 10,
                    itemHeight: 10,

                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '4%',
                    containLabel: true
                },
                toolbox: {
                    feature: {
                        saveAsImage: {}
                    }
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: this.statistics.datax
                },
                yAxis: {
                    type: 'value',
                    axisLine: {
                        show: true,

                    },
                    axisTick: {//坐标刻度
                        show: true,
                    },
                    max: 100
                },
                series: [
                    {
                        name: '水利发电量比例',
                        type: 'line',
                        stack: 'Total',
                        data: this.statistics.dataone

                    },
                    {
                        name: '天然气发电量比例',
                        type: 'line',
                        stack: 'Total',
                        data: this.statistics.datatwo
                    },
                    {
                        name: '核能发电量比例',
                        type: 'line',
                        stack: 'Total',
                        data: this.statistics.datathree

                    },
                    {
                        name: '石油发电量比例',
                        type: 'line',
                        stack: 'Total',
                        data: this.statistics.datafour,
                        areaStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(
                                    0,
                                    0,
                                    0,
                                    1,
                                    [
                                        {
                                            offset: 0,
                                            color: 'LightPink',
                                        },

                                        {
                                            offset: 0.9,
                                            color: 'GhostWhite',
                                        },
                                    ],
                                    false
                                ),
                                shadowColor: 'rgba(232,246,254,0.2)',
                                shadowBlur: 10,
                            },
                        },
                    },
                    {
                        name: '可再生能源发电量比例',
                        type: 'line',
                        stack: 'Total',
                        data: [79.233, 79.443, 79.54, 79.22, 79.68, 79.78, 79.45, 79.66, 79.77, 79.33, 78.90, 77.89, 78.89, 78.55, 78.55],
                        areaStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(
                                    0,
                                    0,
                                    0,
                                    1,
                                    [
                                        {
                                            offset: 0,
                                            color: 'rgba(0,192,255,0.4)',
                                        },

                                        {
                                            offset: 0.8,
                                            color: 'transparent',
                                        },
                                    ],
                                    false
                                ),
                                shadowColor: 'rgba(232,246,254,0.2)',
                                shadowBlur: 40,
                            },
                        },
                    }
                ]
            };
            chart.setOption(options);
            window.onresize = function () {
                chart.resize()
            }
        }
    },
    props: ['statistics']
}
</script>

<style lang="less" scoped>
.statistics {
    margin-top: 15px;
    padding-top: 5px;
    padding-left: 5px;
    width: 820px;
    height: 100%;
    background-color: #fff;
}
</style>